// 获取所有右侧的 <a> 标签
const rBoxAList = document.querySelectorAll(".rBox .guide a");
const rBoxSlider = document.querySelector(".rBox .guide .slider");
// 获取左页面列表
// 初始坐标
let rBoxSliderPosition = 34;
// 初始页面
let startDiv = document.querySelector("#lBox_0");

// 添加点击监听器
rBoxAList.forEach((rBoxA, index) => {
    // 获取组件位置
    const leftPosition = 34 + 136 * index;
    // 获取跳转组件 id
    const targetId = rBoxA.getAttribute("href")?.substring(1);
    // 获取跳转组件
    if(!targetId || !rBoxSlider) return false;
    const targetDiv = document.getElementById(targetId);

    // 点击时固定
    rBoxA.addEventListener("click", () => {
        // @ts-ignore
        startDiv = targetDiv;
        rBoxSliderPosition = leftPosition;
    });
    // 悬浮时移动
    rBoxA.addEventListener("mouseover", () => {
        // @ts-ignore
        rBoxSlider.style.left = leftPosition + "px";
        targetDiv?.scrollIntoView({behavior: "smooth"});
    });
    // 离开时恢复
    rBoxA.addEventListener("mouseleave", () => {
        setTimeout(() => {
            // @ts-ignore
            rBoxSlider.style.left = rBoxSliderPosition + "px";
            startDiv?.scrollIntoView({behavior: "smooth"});
        }, 50);
    });
});

// 左侧窗口控制
window.addEventListener("resize", () => {
    setTimeout(() => {
        startDiv?.scrollIntoView({behavior: "smooth"});
    }, 500);
});

// 获取导航栏
const guideWin = document.querySelector(".rBox .guideWin");
const guide = document.querySelector(".rBox .guide");

// 滚动固定导航栏并使得播放器消失
window.addEventListener("scroll", () => {
    if(!guideWin || !guide) return false;
    // 获取导航栏位置信息
    let guideWinDisTop = guideWin.getBoundingClientRect().top;

    if(guideWinDisTop >= 0) {
        // @ts-ignore
        guide.style.position = "static";
        // @ts-ignore
        guide.style.boxShadow = "none";
        return;
    }
    // @ts-ignore
    guide.style.position = "fixed";
    // @ts-ignore
    guide.style.top = "0";
    // @ts-ignore
    guide.style.boxShadow = "0 0 6px rgba(0, 0, 0, 0.4)";
})